<template>
  <div class="Monitor">
    <div class="content_top">
      <div id="echarts" v-if="false"></div>
      <div class="abnormal">
        <div class="situation" style="background: #fc6f5e" @click="Monitor_Detail(1)">
          <span class="typeNum">{{ takeCount ? takeCount : '0' }}</span>
          <span class="type">接手超时</span>
        </div>
        <div class="situation" style="background: #27d7b0">
          <span class="typeNum">{{ allCount ? allCount : '0' }}</span>
          <span class="type">今日总数</span>
        </div>
        <div class="situation" style="background: #aa5fff" @click="Monitor_Detail(2)">
          <span class="typeNum">{{ updateCount ? updateCount : '0' }}</span>
          <span class="type">更新超时</span>
        </div>
        <div class="situation" style="background: #007af5">
          <span class="typeNum">{{ openCount ? openCount : '0' }}</span>
          <span class="type">当前处理</span>
        </div>
      </div>
      <div class="take_timeout">
        <div id="pie_take"></div>
        <div id="bar_take"></div>
      </div>
      <div class="Update_timeout">
        <div id="pie_update"></div>
        <div id="bar_update"></div>
      </div>
    </div>
    <div class="bottom">
      <p class="title">
        <span>近8天单日增量同比趋势图</span>
      </p>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="false">
        <el-tab-pane label="总量" name="the_total">
          <div id="the_total"></div>
        </el-tab-pane>
        <el-tab-pane label="紧急" name="emergency"><div id="the_total"></div></el-tab-pane>
        <el-tab-pane label="急" name="important"><div id="the_total"></div></el-tab-pane>
        <el-tab-pane label="一般" name="remind"><div id="the_total"></div></el-tab-pane>
      </el-tabs>
      <el-container class="demo-tabs">
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
          >
            <div class="flex-grow" />
            <el-menu-item index="">总量</el-menu-item>
            <el-menu-item index="3">紧急</el-menu-item>
            <!--   <el-menu-item index="6">处理超时</el-menu-item> -->
            <el-menu-item index="2">急</el-menu-item>
            <el-menu-item index="1">一般</el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <div id="the_total"></div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { eventCount, eventCountType, compareCount } from '@/http/api';
  import { watch, onMounted, ref, getCurrentInstance, reactive, markRaw } from 'vue';
  import { useRouter } from 'vue-router';
  //   import { useStore } from 'vuex';
  //   const store = useStore();
  const router = useRouter();
  // const route = useRoute();
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  // const emergCount = ref(''); // 应急事件
  const takeCount = ref(''); // 接手超时
  const updateCount = ref(''); // 更新超时
  const allCount = ref(''); // 今日总数
  const openCount = ref(''); // 当前处理
  const taskType = ref('');
  const updateType = ref('');
  const taskCenter = ref('');
  const updateCenter = ref('');
  const { proxy } = getCurrentInstance() as any;
  const pie_take = ref<HTMLElement>();
  const bar_take = ref<HTMLElement>();
  const pie_update = ref<HTMLElement>();
  const bar_update = ref<HTMLElement>();
  const the_total = ref<HTMLElement>();
  const activeIndex = ref('');
  const NearlyEight_time = reactive([]);
  const ftCount = reactive([]);
  const hfCount = reactive([]);
  const lfCount = reactive([]);
  const yzCount = reactive([]);
  const notCount = reactive([]);
  const handleSelect = (key: any) => {
    activeIndex.value = key;
    compareCount_list();
  };
  onMounted(() => {
    geteventCount_type();
    getEventCount();
    compareCount_list();
    pie_takeBox();
    bar_takeBox();
    pie_updateBox();
    bar_updateBox();
    the_total_list();
  });
  const getEventCount = () => {
    eventCount().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      updateCount.value = res.data.data.adjectiveCount.updateCount;
      takeCount.value = res.data.data.adjectiveCount.takeCount;
      allCount.value = res.data.data.allCount;
      openCount.value = res.data.data.openCount;
    });
  };
  const geteventCount_type = () => {
    eventCountType().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      taskType.value = res.data.data.taskType;
      updateType.value = res.data.data.updateType;
      taskCenter.value = res.data.data.taskCenter;
      updateCenter.value = res.data.data.updateCenter;
      pie_takeBox();
      pie_updateBox();
      bar_takeBox();
      bar_updateBox();
    });
  };
  const compareCount_list = () => {
    compareCount({ type: activeIndex.value }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      NearlyEight_time.length = 0;
      ftCount.length = 0;
      hfCount.length = 0;
      lfCount.length = 0;
      yzCount.length = 0;
      notCount.length = 0;
      if (res.data.data.length) {
        // image.value = true;
        res.data.data.forEach((item) => {
          (NearlyEight_time as any).push(item.time);
          (ftCount as any).push(item.data.ftCenter);
          (hfCount as any).push(item.data.hfCenter);
          (lfCount as any).push(item.data.lfCenter);
          (yzCount as any).push(item.data.yzCenter);
          (notCount as any).push(item.data.notCenter);
        });
        the_total_list();
        // NearlyEight_time, ftCount, hfCount, lfCount, yzCount, notCount
        // order_amountList_sys(obj, count);
      } else {
        // image.value = false;
      }
    });
  };
  // 接受超时==中心
  const pie_takeBox = () => {
    if (pie_take.value != null && pie_take.value != '' && pie_take.value != undefined) {
      pie_take.value.dispose();
    }
    pie_take.value = proxy.$ECharts.init(document.getElementById('pie_take'));
    let option;
    let { ftCenter, yzCenter, notCenter, lfCenter, hfCenter } = taskCenter.value
      ? taskCenter.value
      : '0';
    const ary = ref(
      Number(ftCenter) + Number(yzCenter) + Number(notCenter) + Number(lfCenter) + Number(hfCenter)
    );
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '接手超时',
          type: 'pie',
          silent: true,
          // lengendHoverLink: false,
          // animation:false,
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|接手超时}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: ary.value,
              // value: '100',
              name: '接手超时',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '接手超时',
          silent: false,
          // lengendHoverLink: false,
          // animation:false,
          type: 'pie',
          cursor: 'pointer',
          radius: ['77%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          data: [
            {
              value: ftCenter,
              name: '丰台中心',
              // value: '10',
              itemStyle: {
                color: '#FFBB37'
              }
            },
            {
              value: yzCenter,
              name: '亦庄中心',
              // value: '20',
              itemStyle: {
                color: '#007af5'
              }
            },
            {
              value: notCenter,
              name: '无所属中心',
              // value: '50',
              itemStyle: {
                color: '#AA5FFF'
              }
            },
            {
              value: lfCenter,
              name: '廊坊中心',
              // value: '50',
              itemStyle: {
                color: '#CCE198'
              }
            },
            {
              value: hfCenter,
              name: '合肥中心',
              // value: '50',
              itemStyle: {
                color: '#FC6F5E'
              }
            }
          ]
        }
      ]
    };
    option && pie_take.value.setOption(option);
    pie_take.value.on('click', (params) => {
      switch (params.name) {
        case '丰台中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '1',
              center: '2'
            }
          });
          break;

        case '合肥中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '1',
              center: '0'
            }
          });
          break;
        case '亦庄中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '1',
              center: '1'
            }
          });
          break;
        case '廊坊中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '1',
              center: '3'
            }
          });
          break;
        case '无所属中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '1',
              center: '5'
            }
          });
          break;
      }
    });
  };
  // 接手超时--等级
  const bar_takeBox = () => {
    if (bar_take.value != null && bar_take.value != '' && bar_take.value != undefined) {
      bar_take.value.dispose();
    }
    let { important, remind, urgent } = taskType.value ? taskType.value : '0';
    bar_take.value = proxy.$ECharts.init(document.getElementById('bar_take'));
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '10',
        bottom: '10',
        left: '80',
        right: '30'
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        data: [
          {
            value: '一般',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            value: '急',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            value: '紧急',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          }
        ],
        axisLine: {
          show: false
        }
      },
      series: [
        {
          // name: "Profit",
          type: 'bar',
          barWidth: '10',
          label: {
            show: true,
            position: 'right',
            color: '#46545D',
            fontSize: 14
          },
          itemStyle: {
            borderRadius: 5
          },

          data: [
            {
              value: remind, // 升级异常
              // value: VmbizCount?.value?.exceptionCount ? VmbizCount?.value?.exceptionCount : '0',
              // value: '100',
              itemStyle: {
                color: '#FC6F5E'
              }
            },
            {
              value: important, // 已评价
              // value: VmbizCount?.value?.evaluateCount ? VmbizCount?.value?.evaluateCount : '0',
              // value: '50',
              itemStyle: {
                color: '#AA5FFF'
                //    borderRadius: [5, 5, 5, 5],
              }
            },

            {
              value: urgent, // 紧急
              // value: VmbizCount?.value?.completeCount ? VmbizCount?.value?.completeCount : '0',
              // value: '30',
              itemStyle: {
                color: '#27D7B0'
              }
            }
          ]
        }
      ]
    };

    option && bar_take.value.setOption(option);
    bar_take.value.getZr().on('click', (params) => {
      const pointInPixel = [params.offsetX, params.offsetY];
      if (bar_take.value.containPixel('grid', pointInPixel)) {
        let xIndex = bar_take.value.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY
        ])[1];
        switch (xIndex) {
          case 0:
            router.push({
              name: 'monitorEchart',
              params: {
                type: '1',
                level: '1'
              }
            });
            break;
          case 1:
            router.push({
              name: 'monitorEchart',
              params: {
                type: '1',
                level: '2'
              }
            });
            break;
          case 2:
            router.push({
              name: 'monitorEchart',
              params: {
                type: '1',
                level: '3'
              }
            });
            break;
        }
      }
    });
  };
  // 更新超时 -- 中心
  const pie_updateBox = () => {
    if (pie_update.value != null && pie_update.value != '' && pie_update.value != undefined) {
      pie_update.value.dispose();
    }
    pie_update.value = proxy.$ECharts.init(document.getElementById('pie_update'));
    let option;
    let { ftCenter, yzCenter, notCenter, lfCenter, hfCenter } = updateCenter.value
      ? updateCenter.value
      : '0';
    const ary = ref(
      Number(ftCenter) + Number(yzCenter) + Number(notCenter) + Number(lfCenter) + Number(hfCenter)
    );
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '更新超时',
          type: 'pie',
          silent: true,
          // lengendHoverLink: false,
          // animation:false,
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|更新超时}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              // c: {
              //     fontSize: 20,
              //     fontWeight: "bold",
              //     color: "#46545D ",
              //     lineHeight: "28",
              // },
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: true
          },
          data: [
            {
              value: ary.value,
              name: '更新超时',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '更新超时',
          silent: false,
          type: 'pie',
          cursor: 'pointer',
          radius: ['77%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          data: [
            {
              value: ftCenter,
              name: '丰台中心',
              // value: '10',
              itemStyle: {
                color: '#FFBB37'
              }
            },
            {
              value: yzCenter,
              name: '亦庄中心',
              // value: '20',
              itemStyle: {
                color: '#007af5'
              }
            },
            {
              value: notCenter,
              name: '无所属中心',
              // value: '50',
              itemStyle: {
                color: '#AA5FFF'
              }
            },
            {
              value: lfCenter,
              name: '廊坊中心',
              // value: '50',
              itemStyle: {
                color: '#CCE198'
              }
            },
            {
              value: hfCenter,
              name: '合肥中心',
              // value: '50',
              itemStyle: {
                color: '#FC6F5E'
              }
            }
          ]
        }
      ]
    };
    option && pie_update.value.setOption(option);
    pie_update.value.on('click', (params) => {
      switch (params.name) {
        case '丰台中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '2',
              center: '2'
            }
          });
          break;

        case '合肥中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '2',
              center: '0'
            }
          });
          break;
        case '亦庄中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '2',
              center: '1'
            }
          });
          break;
        case '廊坊中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '2',
              center: '3'
            }
          });
          break;
        case '无所属中心':
          router.push({
            name: 'monitorEchart',
            params: {
              type: '2',
              center: '5'
            }
          });
          break;
      }
    });
  };
  // 更新超时--等级
  const bar_updateBox = () => {
    if (bar_update.value != null && bar_update.value != '' && bar_update.value != undefined) {
      bar_update.value.dispose();
    }
    let { important, remind, urgent } = updateType.value ? updateType.value : '0';
    bar_update.value = proxy.$ECharts.init(document.getElementById('bar_update'));
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '10',
        bottom: '10',
        left: '80',
        right: '30'
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        data: [
          {
            value: '一般',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            value: '急',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            value: '紧急',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          }
        ],
        axisLine: {
          show: false
        }
      },
      series: [
        {
          // name: "Profit",
          type: 'bar',
          barWidth: '10',
          label: {
            show: true,
            position: 'right',
            color: '#46545D',
            fontSize: 14
          },
          itemStyle: {
            borderRadius: 5
          },

          data: [
            {
              value: remind, // 一般
              // value: VmbizCount?.value?.exceptionCount ? VmbizCount?.value?.exceptionCount : '0',
              // value: '100',
              itemStyle: {
                color: '#FC6F5E'
              }
            },
            {
              value: important, // 急
              // value: VmbizCount?.value?.evaluateCount ? VmbizCount?.value?.evaluateCount : '0',
              // value: '50',
              itemStyle: {
                color: '#AA5FFF'
                //    borderRadius: [5, 5, 5, 5],
              }
            },

            {
              value: urgent, // 紧急
              // value: VmbizCount?.value?.completeCount ? VmbizCount?.value?.completeCount : '0',
              // value: '30',
              itemStyle: {
                color: '#27D7B0'
              }
            }
          ]
        }
      ]
    };

    option && bar_update.value.setOption(option);
    bar_update.value.getZr().on('click', (params) => {
      const pointInPixel = [params.offsetX, params.offsetY];
      if (bar_update.value.containPixel('grid', pointInPixel)) {
        let xIndex = bar_update.value.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY
        ])[1];
        switch (xIndex) {
          case 0:
            router.push({
              name: 'monitorEchart',
              params: {
                type: '2',
                level: '1'
              }
            });
            break;
          case 1:
            router.push({
              name: 'monitorEchart',
              params: {
                type: '2',
                level: '2'
              }
            });
            break;
          case 2:
            router.push({
              name: 'monitorEchart',
              params: {
                type: '2',
                level: '3'
              }
            });
            break;
        }
        // if (xIndex == '3') {
        //   router.push({
        //     name: 'edition',
        //     params: {
        //       type: '1',
        //       startTime: startTime.value,
        //       endTime: endTime.value
        //     }
        //   });
        // } else if (xIndex == '2') {
        //   router.push({
        //     name: 'edition',
        //     params: {
        //       type: '3',
        //       startTime: startTime.value,
        //       endTime: endTime.value
        //     }
        //   });
        // } else if (xIndex == '1') {
        //   router.push({
        //     name: 'edition',
        //     params: {
        //       type: '4',
        //       startTime: startTime.value,
        //       endTime: endTime.value
        //     }
        //   });
        // } else if (xIndex == '0') {
        //   router.push({
        //     name: 'edition',
        //     params: {
        //       type: '2',
        //       startTime: startTime.value,
        //       endTime: endTime.value
        //     }
        //   });
        // }
      }
    });
  };
  const the_total_list = () => {
    // hf_Count: striing, lf_Count: string
    // yz_Count: string,
    // not_Count: string
    // lf_Count: string
    if (the_total.value != null && the_total.value != '' && the_total.value != undefined) {
      the_total.value.dispose();
    }
    the_total.value = markRaw(proxy.$ECharts.init(document.getElementById('the_total')));
    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true
      },
      // axisPointer: {
      //   show: true
      // },
      legend: {
        data: ['丰台中心', '合肥中心', '廊坊中心', '亦庄中心', '无所属中心'], // , , '亦庄中心', '无所属中心'
        icon: 'circle',
        // left: '0%',
        right: '0',
        bottom: '0',
        selectedMode: false
      },
      grid: {
        left: '3%',
        right: '5%',
        bottom: '15%',
        top: '6%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // data: ['1', '2', '3', '4', '5', '6', '7']
        data: NearlyEight_time
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '丰台中心',
          type: 'line',
          // stack: 'Total',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            // color: '#007AF5',
            width: 1
          },
          //  data: [120, 132, 101, 134, 90, 230, 210]
          data: ftCount
        },
        {
          name: '合肥中心',
          type: 'line',
          // stack: 'Total',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            // color: '#007AF5',
            width: 1
          },
          // data: [220, 182, 191, 234, 290, 330, 310]
          data: hfCount
        },
        {
          name: '廊坊中心',
          type: 'line',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            // color: '#007AF5',
            width: 1
          },
          // data: [150, 232, 201, 154, 190, 330, 410]
          data: lfCount
        },
        {
          name: '亦庄中心',
          type: 'line',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            // color: '#007AF5',
            width: 1
          },
          // data: [320, 332, 301, 334, 390, 330, 320]
          data: yzCount
        },
        {
          name: '无所属中心',
          type: 'line',
          // stack: 'Total',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            // color: '#007AF5',
            width: 1
          },
          // data: [320, 332, 301, 334, 390, 330, 320]
          data: notCount
        }
      ]
    };

    option && the_total.value.setOption(option);
  };
  const Monitor_Detail = (num) => {
    router.push({
      name: 'monitor',
      params: { type: num }
    });
  };
  watch(props, () => {
    geteventCount_type();
    getEventCount();
    compareCount_list();
  });
</script>

<style scoped lang="less">
  .Monitor {
    .content_top {
      display: flex;
      width: 100%;
      // height: 130px;
      justify-content: space-around;
      .abnormal {
        height: 110px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 20%;
        .situation {
          height: 49%;
          width: 49%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .typeNum {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #ffffff;
          }
          .type {
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
      .take_timeout,
      .Update_timeout {
        width: 38%;
        display: flex;
        // justify-content: space-between;
        #pie_take,
        #pie_update {
          width: 100px;
          height: 100px;
          //  background: red;
          background: #ebeff5;
          border-radius: 50%;
          // margin: 0 auto;
          //margin-bottom: 20px;
        }
        #bar_take,
        #bar_update {
          height: 110px;
          width: calc(100% - 130px);
          // background: #ebeff5;
        }
      }
    }
    .bottom {
      height: calc(100% - 110px);
      // display: flex;
      // justify-content: space-between;
      position: relative;
      .title {
        font-size: 14px;
        font-weight: bold;
        color: #46545d;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 10px;
      }
      .el-tabs {
        width: 100%;
        height: 100%;
        :deep(.el-tabs__header) {
          margin-bottom: 0;
        }
        :deep(.el-tabs__nav-wrap::after) {
          height: 0;
        }
        :deep(.el-tabs__nav-wrap) {
          .el-tabs__nav {
            float: right;
          }
        }
        :deep(.el-tabs__content) {
          height: calc(100% - 40px);
          #pane-the_total {
            height: 100%;
            #the_total {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .demo-tabs {
        height: 100%;
        .el-header {
          padding-left: 200px;
          padding-right: 0;
          height: 40px;
          .el-menu {
            height: 100%;
          }
        }
        .el-menu--horizontal {
          border-bottom: none;
        }
        .flex-grow {
          flex-grow: 1;
        }
        .el-main {
          padding: 0;
          #the_total {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
